<ion-content>

  <!-- <div class="star-bg" *ngIf="!isClose">
    <button class="star-btn" ion-button clear (click)="closeScore()" color="light"><ion-icon name="close"></ion-icon></button>
    <div class="star-words">
      <span>请为我们评分</span>
    </div>
    <div class="star-div" >
      <div *ngFor="let scoreMap of score.starMap; let indx = index" (click)="chooseStar($event)">
        <ion-icon name="star" color="chrome3" *ngIf="score.star>=indx+1;" style="padding-right: .5em" [attr.data-index]="indx+1"></ion-icon>
        <ion-icon name="star-outline" color="light" *ngIf="score.star<indx+1;" style="padding-right: .5em" [attr.data-index]="indx+1"></ion-icon>
      </div>
    </div>
  </div> -->
  <div class="main-content">
    <div class="search-div">
      <ion-item no-lines>
        <ion-searchbar class="search-bar" placeholder="英语文学" no-padding (ionFocus)="showSearch()">
        </ion-searchbar>
        <ion-icon name="ios-alarm-outline" class="icon-right" item-end (click)="show()"></ion-icon>
        <ion-icon name="ios-download-outline" class="icon-right" item-end (click)="show()"></ion-icon>
      </ion-item>
    </div>
    <div class="slide-img">
      <ion-slides #slider pager autoplay="2000" loop="true" (ionSlideDidChange)="onSlideChanged()" dir="ltr">
        <ion-slide *ngFor="let slide of slides" [ngStyle]="{'background':'url(' +slide.imageUrl+')'}">
          <h2>{{slide.title}}</h2>
        </ion-slide>
      </ion-slides>
    </div>
    <div class="classify">
      <div class="myGrid">
        <ion-grid>
          <ion-row>
            <ion-col col-4>
              <ion-icon name="md-archive" color="beauty1"></ion-icon>
            </ion-col>
            <ion-col col-4>
              <ion-icon name="heart" color="beauty4"></ion-icon>
            </ion-col>
            <ion-col col-4>
              <ion-icon name="md-pie" color="beauty2"></ion-icon>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col col-4>
              <span>视频分类</span></ion-col>
            <ion-col col-4>
              <span>添加订阅</span></ion-col>
            <ion-col col-4>
              <span>我的订阅</span></ion-col>
          </ion-row>
        </ion-grid>
      </div>
    </div>
    <hr no-margin>
    <div class="parts-order">
      <div class="order-title">
        <h4 text-center no-margin>我的订阅</h4>
        <hr class="short-hr" no-padding>
      </div>
      <div class="order-cards">
        <ion-item no-lines>
          <ion-avatar float-left padding-right>
            <img src="assets/img/slide1.jpeg" alt="TED">
          </ion-avatar>
          <h2>每日TED优选</h2>
          <p>2017/01/05</p>
          <button ion-button color="secondary" item-end>订阅</button>
        </ion-item>
        <div class="img-div">
          <img src="assets/img/slide1.jpeg" alt="" class="order-img">
          <div class="img-words" padding>
            <h5>如何掌控你们自己的时间</h5>
            <p>经常听见有人抱怨自己很忙，没时间做这个，没时间做哪个。情况真实是这样的吗？</p>
          </div>
        </div>
        <div class="span-div">
          <span float-left>11`55``&nbsp;|&nbsp;4387万人观看</span>
          <span float-right>#视频</span>
        </div>

      </div>
      <div class="order-cards">
        <ion-item no-lines>
          <ion-avatar float-left padding-right>
            <img src="assets/img/slide1.jpeg" alt="TED">
          </ion-avatar>
          <h2>每日TED优选</h2>
          <p>2017/01/05</p>
          <button ion-button color="secondary" item-end>订阅</button>
        </ion-item>
        <div class="img-div">
          <img src="assets/img/slide1.jpeg" alt="" class="order-img">
          <div class="img-words">
            <h5>如何掌控你们自己的时间</h5>
            <p>经常听见有人抱怨自己很忙，没时间做这个，没时间做哪个。情况真实是这样的吗？</p>
          </div>
        </div>
        <div class="span-div">
          <span float-left>11`55``&nbsp;|&nbsp;4387万人观看</span>
          <span float-right>#视频</span>
        </div>

      </div>
    </div>
  </div>
</ion-content>
